<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>滚筒调平仪表图</title>
		<script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script src="./js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
	</head>
	<body class="openSocket">
		
		<div class="allinall">
			
			<div class="gt">
				<p>滚筒调平仪表图</p>
			</div>
			<div class="alert alert-primary alset" role="alert">
				<div class="first">
					<div>
						<button type="button" class="btn btn-warning btwset" onclick="btncli()">初始化</button>
						<button type="button" class="btn btn-primary starts" onclick="starts();records();">启动</button>
						<button type="button" class="btn-primary stopbtn">停止</button>
						<button type="button" class="btn btn-clean" onclick="btnclean()">清除记录</button>
						<button type="button" class="btn btn-export" onclick="btnexport()">导出记录</button>
					</div>
					<span class="text"> (*每次运行前需要点击“初始化”按钮,以进行仪表初始化设置) </span>
				</div>
			</div>
					
			<div class="fontset">	
			<img src="./assets/img/record-circle.png"/>
			<span> 外圈：位置(单位：°)</span>
			<br />
			<img src="./assets/img/record-circle.png" />
			<span> 内圈：扭矩(单位：N·m)</span>
			</div>
			
			<div class="allmain1">
				<div id="main" style="width:1000px;height:800px;"></div>
			</div>
			<div class="allmain2">
				<div id="main1" style="width:790px;height:590px;"></div>
			</div>
			<!-- 参数调整 -->
			<div class="canshu">
				<p class="canshutiaozheng">参数调整：</p>
				  <!-- 输入扭矩-->
				  <div class="form-group mx-sm-3 mb-2" style="float: left;">
				    <input type="text" class="form-control shuruniuju" id="inputtext2 niuju" placeholder="输入扭矩">
					<button type="submit" class="btn btn-primary mb-2 btn-niuju" id="sub1">确定</button>
				  </div>
				  <!-- 输入减速比-->
				  <div class="form-group mx-sm-3 mb-2">
				    <input type="text" class="form-control shurujiansubi" id="inputtext2 jiansu" placeholder="输入减速比">
					<button type="submit" class="btn btn-primary mb-2 btn-jiansubi" id="sub2">确定</button>
				  </div>
				  
				<!-- </form> -->
			</div>
				
		</div>
		
		<div id="nei" class="neiclass">
			<div class="outniuju">
			<span class="niuju">实时扭矩显示</span>
			</div>
			<ul class="neiul" id="ulId">
				
			</ul>
			<ul class="recoredsul" id="recoredulid">
				
			</ul>
		</div>
		
	</body>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));
		var myChart1 = echarts.init(document.getElementById('main1'));
		//外圈
		option = {
			tooltip: {
				formatter: "{a} <br/>{b} : {c}"
			},
			series: [{
				
					axisLabel: {
						fontSize: 20,
					},
					startAngle: 90,
					endAngle: -269.9,
					min: 0,
					max: 360,
					name: '业务指标',
					type: 'gauge',
					detail: {
						formatter: '{value}'
					}, //仪表盘显示数据
					axisLine: {
						lineStyle: {
							width: 20,
							color: [
								[0.6, '#32CD32'],
								[0.8, '#FFA500'],
								[1, '#FF0000']
							],
							opacity: 0.7, //盘的颜色变成透明
							width: 15
						}
						
					},
					splitLine: { //分割线样式,是大分割线
						length: 20,
						width: 3,
					},
					
					// 刻度线
					axisTick: {
						show: true,
						length: 25,
						splitNumber: 9, // 每个分割线内的刻度线分为5份
						lineStyle: {
							//color: "auto",
							width: 3,
							color: [
								[0.6, '#32CD32'],
								[0.8, '#FFA500'],
								[1, '#FF0000']
							]
						}
					},
					data: [{
						value: 0	
					}],
					markPoint: {
						symbol: 'circle',
						symbolSize: 90,
						data: [
							//跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
							{
								value:0,
								x: 'center',
								y: 'center',
								itemStyle: {
									color: '#FF9933'
								}
							}
						],
						itemStyle: {
							normal: {
								label: {
									show: true,
									color: '#FFF', //气泡中字体颜色
									fontSize: 25
								}
							}
						},
					},
					detail: { // 仪表盘详情，用于显示数据。(仪表盘的数值字体样式和显示位置)
						show: true, // 是否显示详情,默认 true。
						offsetCenter: [0, 0], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
						color: "auto", // 文字的颜色,默认 auto。
						fontSize: 15, // 文字的字体大小,默认 15。
						formatter: "{value}", // 格式化函数或者字符串
					},
					pointer: { // 仪表盘指针。
						show: true, // 是否显示指针,默认 true。
						length: "90%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
						width: 35, // 指针宽度,默认 8。
					},
					itemStyle: { // 仪表盘指针样式。
						color: "#FF9933", // 指针颜色，默认(auto)取数值所在的区间的颜色
						opacity: 0.8, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
						borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
						borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
						borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
						shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
						shadowColor: "#fff", // 阴影颜色。支持的格式同color。
					},
				}

			],
		
		};
		myChart.setOption(option);
		
		//内表盘
		option1 = {
			    tooltip: {
			       trigger: 'axis',
				   formatter: "{b} : <br/>{c}"
			     },		
			
			   radar: {
			     // shape: 'circle',
			     splitLine:{
			       show:false,
			     },
			     axisLine:{
			       show:true
			     },			   
			     indicator: [
			       { name: '8', max: 3000 },
				   { name: '7', max: 3000 },
				   { name: '6', max: 3000 },
				   { name: '5', max: 3000 },
					{ name: '4', max: 3000 },
					{ name: '3', max: 3000 },
					{ name: '2', max: 3000 },
					{ name: '1', max: 3000 }

			     ],
				  center: ['50%', '50%'],
			   },
			   series: [{				   
			       type: 'radar',
				   tooltip: {
				   		trigger: 'item'
				    },
			       data: [
			         {
			           value: [0,0,0,0,0,0,0,0],
			           name: '扭矩'
			         }
			       ]
			     }
			   ]
		};
		myChart1.setOption(option1);	
		function records(){
			$.ajax({
			    url: "http://localhost:8085/api/newRollerNum",
			    type: "get",
			    async: false,  //这里务必加上
			    dataType: "json",
			    // data: { Action: "data", AjaxFllage: true },
			    success: function (value) {
					console.log(value)
					var result=value.data;
					var html="<li>"+"记录中..."+"</li>"
					$("#recoredulid").append(html);
					if(result==true){
						var html="<li>"+"记录成功一次"+"</li>"
						$("#recoredulid").append(html);
					}
			    }
			});
			var socket;
			if(typeof(WebSocket) == "undefined") {
			        console.log("您的浏览器不支持WebSocket");
			    }else{
			        console.log("您的浏览器支持WebSocket");
			        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
			        //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
			        //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
			        var socketUrl="http://localhost:8085/api/ws/asset";
			        socketUrl=socketUrl.replace("https","ws").replace("http","ws");
			        console.log(socketUrl);
			        if(socket!=null){
			            socket.close();
			            socket=null;
			        }
			        socket = new WebSocket(socketUrl);
			        //打开事件
			        socket.onopen = function() {
			            console.log("websocket已打开");
			            //socket.send("这是来自客户端的消息" + location.href + new Date());
			        };
			        //获得消息事件
			        socket.onmessage = function(msg) {
			            console.log(msg.data);
						if(msg.data=="true"){
							console.log("进入了")
							var html="<li>"+"记录成功一次"+"</li>"
							$("#recoredulid").append(html);
						}
						
			            //发现消息进入    开始处理前端触发逻辑
			        };
			        //关闭事件
			        socket.onclose = function() {
			            console.log("websocket已关闭");
			        };
			        //发生了错误事件
			        socket.onerror = function() {
			            console.log("websocket发生了错误");
			        };
					
			    }
			
			function sendMessage() {
			    if(typeof(WebSocket) == "undefined") {
			        console.log("您的浏览器不支持WebSocket");
			    }else {
			        console.log("您的浏览器支持WebSocket");
			        console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
			        socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
			    }
			 
			 }
		}
		//ajax
		function getFrom() {
		    $.ajax({
		        url: "http://localhost:8085/api/rollernum",
		        type: "get",
		        async: false,  //这里务必加上
		        dataType: "json",
		        success: function (value) {		
					// console.log(value);
		        		var outtor;				
					if(value.data!=null&&value.data.list[0]!=0){							
						var deg=value.data.rollerdeg;//角度（待改）
						var tor=value.data.list;//扭矩（待改）
						outtor=tor;
						var html="<li>"+tor+"</li>"
						$(".neiul").append(html);
						var obj = document.getElementById("ulId");
						var liObj = obj.childNodes;//li都是ul的孩子，所以通过 childNodes 获取所有li
						// for (var i = 0; i < liObj.length; i++) {							
							if(tor.length==8){
								while(obj.hasChildNodes()) //当div下还存在子节点时 循环继续  
								    {
								        obj.removeChild(obj.firstChild);
								    }
							}
						// }	
							//设置内圈
							myChart1.setOption({
							    series: [{
							        type: 'radar',
							    				   tooltip: {
							    				   		trigger: 'item'
							    				    },
							        data: [
							          {
							            value:tor,
							            name: '扭矩'
							          }
							        ]
							      }
							    ]
							  });
					
					// }								
					//设置外圈
					myChart.setOption({
					    series: [{
					       data: [{
					       	value: deg
					       }],
					       markPoint: {
					       	symbol: 'circle',
					       	symbolSize: deg,
					       	data: [
					       		//跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
					       		{
					       			value:deg
					       		}
					       	]
					       }
						  }]
					  });		
		       
	}
	}
		});
		}	
$(function(){
	
	$(".stopbtn").click(function(){
		// console.log("执行了");
		clearInterval(interval);
	});
})
	
	var interval;
	function starts(){
		interval= window.setInterval(getFrom, 220);	
		
	};
		function btncli(e){
			$.ajax({
			    url: "http://localhost:8085/api/setnDefault",
			    type: "get",
			    async: false,  //这里务必加上
			    dataType: "json",
			    // data: { Action: "data", AjaxFllage: true },
			    success: function (value) {
					var result=value.data;
					if(result=true){
						alert("初始化成功")
					}else{
						alert("初始化失败")
					}
			    }
			});
		}
		
		function btnclean() {
		    jQuery.ajax({
		        url: "http://localhost:8085/api/delQu",
		        type: "DELETE",
		        async: false,  //这里务必加上
		        dataType: "json",
		        // data: { Action: "data", AjaxFllage: true },
		        success: function (value) {
					var result=value.data;
					if(result=true){
						alert("清除记录成功")
					}else{
						alert("清除记录失败")
					}
					
		        }
		    });
		}
		
		function btnexport() {
		    jQuery.ajax({
		        url: "http://localhost:8085/api/ExpQu",
		        type: "get",
		        async: false,  //这里务必加上
		        dataType: "json",
		        // data: { Action: "data", AjaxFllage: true },
		        success: function (value) {
					var result=value.data;
					if(result=true){
						alert("导出成功")
					}else{
						alert("导出失败")
					}
					
		        }
		    });
		}
		$("#sub1").click(function(){
			console.log("点击了");
			var niuju=$(".shuruniuju").val();
			
			$.ajax({
			    url: "http://localhost:8085/api/RatedTorque/"+niuju,
			    type: "get",
			    async: false,  //这里务必加上
			    dataType: "json",
			    // data: { ratetor: niuju},
			    success: function (value) {
					var result=value.data;
					if(result=true){
						alert("成功")
					}else{
						alert("失败")
					}
					
			    }
			});
	
			console.log(niuju);
		})
		$("#sub2").click(function(){
			var jiansubi=$(".shurujiansubi").val();
			$.ajax({
			    url: "http://localhost:8085/api/RatedTorque/"+jiansubi,
			    type: "get",
			    async: false,  //这里务必加上
			    dataType: "json",
			    // data: { ratetor: niuju},
			    success: function (value) {
					var result=value.data;
					if(result=true){
						alert("成功")
					}else{
						alert("失败")
					}
					
			    }
			});
			console.log(jiansubi);
		})

		
	</script>
	<style>
		body{
			background-color:#2C324D;
		}
		* {
			margin: 0;
			padding: 0;
		}
		.canshu p {
			margin-left: 16px;
			color: #fff;
			font-size: 16px;
		}
		.canshu {
			position: absolute;
			width: 350px;
			margin-top: 10px;
			margin-left: 110px;
		}
		.form-control {
			width: 200px;
		}
		.shuruniuju {
			float: left;
		}
		.shurujiansubi {
			float: left; 
		}
		.btn-niuju {
			margin-left: 5px;
		}
		.btn-jiansubi {
			margin-left: 5px;
		}	
		.allmain1 {
			margin-top: -30px;
			margin-left: 20px;
		}
		.allmain2 {
			margin-top: -694px;
			margin-left:125px;
			z-index: 999;
			
		}
		.allinall {	
			margin-top: 16px;
			margin-left: 16px;
			border-radius: 10px;
			height:1050px;
		    width: 54%;
			background-color:#62677E;
		}
		.fontset{
			position: absolute;
			color: #fff;
			padding-left: 100px;	
			margin-left: 25px;
			margin-top: 10px;
		}
		.fontset span{
			font-family: "microsoft yahei";
			font-size:14px;		
		}
		.fontset img{
			height: 20px;
		}
		.gt{
			margin: 0 auto;
			text-align: center;
			padding-top: 30px;
		}
		.gt p{
			font-family: "microsoft yahei";
			font-size:24px;
			color: #fff;
		}
		.alset{
			width:970px;
			margin-left: 50px;
			margin-top: 10px;
			display: inline-block;
			background-color: #62677e;
			border: #62677e;
		}
		.btwset{
			width: 150px;
			margin-left: 56px;
		}
		.neiclass li{
			list-style: none;
			font-size: 14px;		
		}
		.neiul{
			margin-top: 30px;
			margin-left: 50px;
			width: 50%;
			height: auto;
		}
		#canvas {
			margin-left: 20px;
		}
		.neiclass{	
			border-radius: 10px;
			background-color: #eee;
			position: absolute; 
			float: right;	
			top: 0; 
			margin-top: 15px;
			margin-left: 1060px;
			width: 43.8%;
			height: 1050px;
		}
		.starts{
			width: 150px;
			margin-left: 56px;
		}
		.first {
			width: 100%;	
		}
		.text {
			margin-left: 55px;
			color: yellow;
			font-size: 14px;
		}
		.second {
			width: 400px;
			float: left;
		}
		.niuju{
			text-align: center;
			display: block;
			font-size: 24px;
			margin-top: 20px;
		}
		.outniuju{
			padding-top:6px;
			width: 100%;
			height: auto;
		}
		.btn-clean {
			width: 150px;
			background-color: #C8CBCF;
			margin-left: 56px;
		}
		.btn-export {
			width: 150px;
			background-color: #34CE57;
			margin-left: 56px;
		}
		.recoredsul{
			margin-right: 50px;
			float: right;
			width: 190px;
			height: auto;
		}
	</style>
